<template>
  <!-- 本页面仅为多sheet到导出参考案例 -->
  <div class="multiple-sheet-export-to-excel">
    <el-button type="primary" @click="onDownload"
      >多sheet点击导出案例</el-button
    >
    <el-table :data="tableData1" border style="width: 50%" height="400px">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="pageviews" label="页面浏览量"></el-table-column>
      <el-table-column prop="display_time" label="时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { data } from "./data";
import { multipleSheetExport } from "@/utils/multipleSheetExport";

const excelDatas = [
  {
    // sheet表一头部
    tHeader: ["ID", "标题", "作者", "页面浏览量", "时间"],
    // 表一的数据字段
    filterVal: ["id", "title", "author", "pageviews", "display_time"],
    // 表一的整体json数据
    tableDatas: data.LIST,
    // 表一的sheet名字
    sheetName: "sheetName1",
  },
  {
    tHeader: ["序号", "标题", "作者", "服务"],
    filterVal: ["id", "title", "author", "reviewer"],
    tableDatas: data.LIST,
    sheetName: "sheetName2",
  },
  {
    tHeader: ["序号", "名字", "描述"],
    filterVal: ["userId", "userName", "userDescription"],
    tableDatas: data.ROLESlIST,
    sheetName: "sheetName3",
  },
];

export default {
  name: "MultipleSheetExport2Excel",
  data() {
    return {
      tableData1: [],
      tableData2: [],
      tableData3: [],
    };
  },
  created() {
    this.tableData1 = data.LIST;
    this.tableData2 = data.LIST;
    this.tableData3 = data.ROLESlIST;
  },
  methods: {
    onDownload() {
      multipleSheetExport(excelDatas, "数据表格", true, "xlsx");
    },
  },
};
</script>

<style scoped lang="scss">
</style>
